<template>
  <div class="report-container">
    <!-- 顶部标题栏 -->
    <div class="header">
     <div class="back-arrow" @click="goBack">←</div>
      <div class="title">体检报告</div>
    </div>

    <!-- 标签切换 -->
    <div class="tab-container">
      <div 
        class="tab" 
        :class="{ active: activeTab === 'conclusion' }"
        @click="activeTab = 'conclusion'"
      >
        总检结论
      </div>
      <div 
        class="tab" 
        :class="{ active: activeTab === 'detail' }"
        @click="activeTab = 'detail'"
      >
        报告详情
      </div>
    </div>

    <!-- 总检结论内容 -->
    <div v-if="activeTab === 'conclusion'" class="content">
      <!-- 异常项 -->
      <div class="section">
        <div class="section-title">异常项</div>
        <div class="abnormal-item">
          <span class="abnormal-tag">异</span>
          <div class="item-content">
            <div class="item-name">收缩压</div>
            <div class="item-value abnormal">149</div>
            <div class="normal-range">正常值范围:&lt;140</div>
          </div>
        </div>
        <div class="abnormal-item">
          <span class="abnormal-tag">异</span>
          <div class="item-content">
            <div class="item-name">白细胞计数</div>
            <div class="item-value abnormal">3.56 10^9/L</div>
            <div class="normal-range">正常值范围:4-10</div>
          </div>
        </div>
      </div>

      <!-- 体检结论 -->
      <div class="section">
        <div class="conclusion-text">
          一、尊敬的顾客，您本次体检结论如下:<br>
          1、超重<br>
          2、血压增高<br>
          3、血常规异常
        </div>
      </div>

      <!-- 体检建议 -->
      <div class="section">
        <div class="conclusion-text">
          二、尊敬的顾客，您本次体检建议信息如下:<br>
          1、超重<br>
          您的体重指标属超重。体内脂肪过度增加,使体重超过正常范围,可引起高血压、高血脂、糖尿病、冠心病以及免疫功能降低等并发症。建议:合理膳食,以低盐 低脂 高纤维为原则;三餐定时 不吃零食
        </div>
      </div>
    </div>

    <!-- 报告详情内容 -->
    <div v-if="activeTab === 'detail'" class="content">
      <!-- 一般检测 -->
      <div class="section">
        <div class="section-title">一般检测</div>
        <div class="detail-item">
          <span class="abnormal-tag">异</span>
          <div class="item-content">
            <div class="item-name">收缩压</div>
            <div class="item-value abnormal">149</div>
            <div class="normal-range">正常值范围：&lt;140</div>
          </div>
        </div>
        <div class="detail-item">
          <span class="abnormal-tag">异</span>
          <div class="item-content">
            <div class="item-name">舒张压</div>
            <div class="item-value abnormal">90</div>
            <div class="normal-range">正常值范围：&lt;90</div>
          </div>
        </div>
        <div class="detail-item">
          <div class="item-content">
            <div class="item-name">身高</div>
            <div class="item-value">177.00cm</div>
          </div>
        </div>
        <div class="detail-item">
          <div class="item-content">
            <div class="item-name">体重</div>
            <div class="item-value">80kg</div>
          </div>
        </div>
      </div>

      <!-- 血常规 -->
      <div class="section">
        <div class="section-title">血常规</div>
        <div class="detail-item">
          <span class="abnormal-tag">异</span>
          <div class="item-content">
            <div class="item-name">白细胞计数</div>
            <div class="item-value abnormal">3.56 10^9/L</div>
            <div class="normal-range">正常值范围：4-10</div>
          </div>
        </div>
        <div class="detail-item">
          <div class="item-content">
            <div class="item-name">红细胞压值</div>
            <div class="item-value">47.4 %</div>
            <div class="normal-range">正常值范围：36-50</div>
          </div>
        </div>
        <div class="detail-item">
          <div class="item-content">
            <div class="item-name">淋巴细胞计数百分比</div>
            <div class="item-value">19.03 %</div>
            <div class="normal-range">正常值范围：18.3-47.9</div>
          </div>
        </div>
        <div class="detail-item">
          <div class="item-content">
            <div class="item-name">单核细胞计数百分比</div>
            <div class="item-value">8.00 %</div>
            <div class="normal-range">正常值范围：4.2-15.2</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="nav-item">
        <div class="nav-icon">🏥</div>
        <div class="nav-text">云医院</div>
      </div>
      <div class="nav-item">
        <div class="nav-icon">🛒</div>
        <div class="nav-text">商城</div>
      </div>
      <div class="nav-item">
        <div class="nav-icon">🔍</div>
        <div class="nav-text">发现</div>
      </div>
      <div class="nav-item">
        <div class="nav-icon">👤</div>
        <div class="nav-text">我</div>
      </div>
    </div>
  </div>
</template>

<script>

	
export default {
   name: 'report',
   data() {
     return {
       activeTab: 'conclusion' // conclusion | detail
     }
   },
   methods: {
     goBack() {
       this.$router.back()
     }
   }
 }




</script>

<style scoped>
.report-container {
  max-width: 375px;
  margin: 0 auto;
  background-color: #fff;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.back-arrow {
  font-size: 20px;
  margin-right: 8px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  text-align: center;
  margin-right: 28px;
}

/* 标签切换 */
.tab-container {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 12px;
  color: #666;
  font-size: 16px;
}

.tab.active {
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}

/* 内容区域 */
.content {
  padding: 16px;
}

.section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

/* 异常项样式 */
.abnormal-item,
.detail-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 8px;
}

.abnormal-tag {
  background-color: #ff4d4f;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 12px;
  margin-top: 2px;
}

.item-content {
  flex: 1;
}

.item-name {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.item-value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.item-value.abnormal {
  color: #ff4d4f;
}

.normal-range {
  font-size: 12px;
  color: #999;
}

/* 结论文本 */
.conclusion-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

/* 底部导航 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-top: 1px solid #f0f0f0;
  display: flex;
  padding: 8px 0;
  max-width: 375px;
  margin: 0 auto;
}

.nav-item {
  flex: 1;
  text-align: center;
}

.nav-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.nav-text {
  font-size: 12px;
  color: #666;
}
</style>